<!-- main app container -->
<div class="card m-3 col-5">
    <h5 class="card-header">Angular Reactive Form Validation</h5>
    <div class="card-body">
        <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
            <div class="form-row">
                <div class="form-group col-6">
                    <label>First Name</label>
                    <input
                            type="text"
                            formControlName="firstName"
                            class="form-control"
                            [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }"
                    />
                    <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
                        <div *ngIf="f.firstName.errors.required">
                            First Name is required
                        </div>
                    </div>
                </div>
                <div class="form-group col-6">
                    <label>Last Name</label>
                    <input
                            type="text"
                            formControlName="lastName"
                            class="form-control"
                            [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }"
                    />
                    <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
                        <div *ngIf="f.lastName.errors.required">Last Name is required</div>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-8">
                    <label>Email</label>
                    <input
                            type="text"
                            formControlName="email"
                            class="form-control"
                            [ngClass]="{ 'is-invalid': submitted && f.email.errors }"
                    />
                    <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                        <div *ngIf="f.email.errors.required">TODO: 请补充提示信息</div>
                        <div *ngIf="f.email.errors.email">
                            TODO: 请补充提示信息
                        </div>
                    </div>
                </div>
                <div class="form-group col-4">
                    <label>Age</label>
                    <input
                            type="number"
                            formControlName="age"
                            class="form-control"
                            [ngClass]="{ 'is-invalid': submitted && f.age.errors }"
                    />
                    <div *ngIf="submitted && f.age.errors" class="invalid-feedback">
                        <div *ngIf="f.age.errors.required">TODO: 请补充提示信息</div>
                        <div *ngIf="f.age.errors.min || f.age.errors.max">
                            TODO: 请补充提示信息
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-6">
                    <label>Password</label>
                    <input
                            type="password"
                            formControlName="password"
                            class="form-control"
                    />
                    <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                        <div *ngIf="f.password.errors.required">TODO: 请补充提示信息</div>
                        <div *ngIf="f.password.errors.minlength">
                            TODO: 请补充提示信息
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-primary mr-1">Register</button>
                <button class="btn btn-secondary" type="reset" (click)="onReset()">
                    Cancel
                </button>
            </div>
        </form>
    </div>
</div>
